<template>
  <div id="app">
    <router-view />
    <!-- 图片预览 -->
    <ElImageViewer v-if="showViewer" :on-close="closePreview" :url-list="showViewerImages"></ElImageViewer>
  </div>
</template>
<script>
import jwt_decode from "jwt-decode";
// 图片预览组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  components:{ElImageViewer},
  data() {
    return {
        // 图片预览数据
        showViewer:false,
        showViewerImages:[],
    };
  },
  methods: {
    isEmpty(value) {
      // 判断值为空的方法，为空返回true
      return (
        value === undefined ||
        value === null ||
        (typeof value === "object" && Object.keys(value).length === 0) ||
        (typeof value === "string" && value.trim().length === 0)
      );
    },

    // 图片预览
    createPreview(arrUrl){
        this.showViewerImages = arrUrl
        this.showViewer = true
    },
    // 预览关闭
    closePreview(){
        this.showViewerImages = []
        this.showViewer = false
    }
  },
  created() {
    // 防止刷新页面，丢失数据
    if (localStorage.tokenKey) {
      const decoded = jwt_decode(localStorage.tokenKey);
      // 将解析后的token存储到vuex中
      this.$store.dispatch("setAuthenticated", !this.isEmpty(decoded));
      this.$store.dispatch("setUser", decoded);
    }

  },
  mounted() {
    let vue = this
    // 把图片预览的方法放到全局
    window.createPreview = function(arrUrl){
      // 一定不能用this,这里的this指向已经变了
      vue.createPreview(arrUrl)
    }
  },
};
</script>
<style>
html,body,#app {
  width: 100%;
  min-width: 1200px;
  height: 100%;
}
</style>